import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; //导入css

class NumberCount extends React.Component{
    //构造方法
    constructor(){
        super();
        this.state={
            count:66
        }
    }
    //由于this在普通函数为undefined,所以改为箭头函数 
    jia=()=>{
        //不能直接更新
        // this.state.count=this.state.count+1 
        this.setState({ //类似于微信小程序写法
            count:this.state.count+1
        })
    }
    //传参函数,参数中必须带this,通过bind进行传参
    jian=(num)=>{
        console.log("num=",num);
    }
    //渲染
    render(){
        return(
            <div>
            <h1>计数器</h1>
            <h3>{this.state.count}</h3>
            <button onClick={this.jia}>+1</button>
            <button onClick={this.jian.bind(this,4)}>-</button>
            </div>
        )
    }   
}


// const root = ReactDOM.createRoot(document.getElementById('root'));//得到dom元素

export default NumberCount;
// root.render(
//     <NumberCount />
// )